
var   gulp = require("gulp"),
      connect = require("gulp-connect"),
      sass = require('gulp-sass'),
      babel = require('gulp-babel'),
      uglify = require('gulp-uglify'),
      cssmin = require('gulp-cssmin'),
      proxy = require("http-proxy-middleware")


sass.compiler = require('node-sass');
//-------------------------开启测试服务器------------------------------------------------------
gulp.task("connect", async () => {


      return connect.server({
            //根文件
            root: "dist",
            livereload: true,
            port: 3000,
            middleware : function(){
                  return [
                        // 表示在地址栏里面输入的东西是什么 : 
                        proxy('/pdd',  {
                         //"http：//localhost:3000/pdd" = 'http://10.9.24.145/index'
                            target: 'http://10.9.24.145/index',//代理的目标地址
                            changeOrigin:true,
                            pathRewrite:{//路径重写规则 
                                '^/pdd':''
                            }
                        }),
                        proxy('/pxx',  {
                              target: 'https://apiv2.pinduoduo.com/spike_list',//代理的目标地址
                              changeOrigin:true,
                              pathRewrite:{//路径重写规则 
                                  '^/pxx':''
                              }
                          })
                    ]
            }
      });
});

//----------------HTML编译并刷新----------------------------
gulp.task("html", async () => {
      return gulp.src(["./src/*.html"])
            .pipe(gulp.dest("./dist/"))
            .pipe(connect.reload());
})

//----------------SASS编译并刷新----------------------------
gulp.task("sass", async () => {
      return gulp.src(["./src/styles/*.scss"])
            .pipe(sass().on('error', sass.logError))
            .pipe(gulp.dest("./dist/styles/"))
            .pipe(connect.reload())
})
//-----------------CSS压缩打包-------------------------------
gulp.task("sass-build", async () => {
      return gulp.src(["./src/styles/*.scss"])
            .pipe(sass().on('error', sass.logError))
            .pipe(cssmin())
            .pipe(gulp.dest("./dist/styles/"))
})
//--------------JS压缩打包------------------------
gulp.task("javascripts", async () => {
      await gulp.src(["./src/javascripts/*.js"])
            .pipe(babel({
                  presets: ['@babel/env']
            }))
            .pipe(uglify())
            .pipe(gulp.dest("./dist/javascripts"))
})
//---------------JS编译-----------------------------------------
gulp.task("javascripts-libs", async () => {
      await gulp.src(["./src/javascripts/**/*.js"])
            .pipe(gulp.dest("./dist/javascripts"))
})
//----------------JS刷新-----------------------------------------------
gulp.task("javascripts-dev", async () => {
      await gulp.src(["./src/javascripts/*.js"])
            .pipe(gulp.dest("./dist/javascripts"))
            .pipe(connect.reload())
})
//------------------监听:HTML,CSS,JS-----------------------------------------------
gulp.task("watch", async () => {
      await gulp.watch("./src/*.html", gulp.series("html"));
      await gulp.watch("./src/styles/*.scss", gulp.series("sass"));
      await gulp.watch("./src/javascripts/*.js", gulp.series("javascripts-dev"));
})
//------------------开启想要执行的指令-------------------------------------------------
//--------------------------------------执行前三个命令并同时执行监听和创建测试服务器的功能-------------------
gulp.task("default", gulp.series("html","javascripts-dev","sass" , "javascripts-libs", gulp.parallel("watch", "connect")));
//---------------------------------------执行两个压缩打包的命令-------------------------------------------------
gulp.task("build", gulp.series("javascripts", "sass-build"));